<template>
  <div class="text-preview">
    <div class="preview-header">
      <h3 class="section-title">文本预览</h3>
      <a-button 
        type="text" 
        class="expand-btn"
        @click="toggleFullscreen"
      >
        <Maximize2 v-if="!isFullscreen" :size="16" />
        <Minimize2 v-else :size="16" />
        {{ isFullscreen ? '退出全屏' : '全屏查看' }}
      </a-button>
    </div>
    
    <div 
      class="preview-content"
      :class="{ 'fullscreen': isFullscreen }"
    >
      <div v-if="!content" class="empty-state">
        <FileText :size="48" class="empty-icon" />
        <p class="empty-text">只见他笑吟吟的走来，手里拿着一块精致的片，门内的女孩儿们只听"咔嚓"一声，那那花片儿浮在水面，一上一下，一浮一沉。</p>
        <p class="empty-hint">暂无内容，请先上传文件</p>
      </div>
      
      <div v-else class="text-content">
        <div class="content-stats">
          <span class="stat-item">
            <FileText :size="14" />
            字数: {{ wordCount }}
          </span>
          <span class="stat-item">
            <Clock :size="14" />
            预计时长: {{ estimatedDuration }}
          </span>
        </div>
        
        <div class="text-body" ref="textBody">
          {{ content }}
        </div>
      </div>
      
      <div v-if="isFullscreen" class="fullscreen-overlay" @click="toggleFullscreen">
        <div class="fullscreen-content" @click.stop>
          <div class="fullscreen-header">
            <h3>文本预览</h3>
            <a-button type="text" @click="toggleFullscreen">
              <X :size="20" />
            </a-button>
          </div>
          <div class="fullscreen-body">
            <div class="content-stats">
              <span class="stat-item">
                <FileText :size="14" />
                字数: {{ wordCount }}
              </span>
              <span class="stat-item">
                <Clock :size="14" />
                预计时长: {{ estimatedDuration }}
              </span>
            </div>
            <div class="fullscreen-text">
              {{ content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { FileText, Clock, Maximize2, Minimize2, X } from 'lucide-vue-next'

interface Props {
  content?: string
}

const props = defineProps<Props>()

const isFullscreen = ref(false)
const textBody = ref<HTMLElement>()

const wordCount = computed(() => {
  if (!props.content) return 0
  return props.content.length
})

const estimatedDuration = computed(() => {
  if (!props.content) return '0分钟'
  // 按照每分钟200字的阅读速度计算
  const minutes = Math.ceil(props.content.length / 200)
  if (minutes < 60) {
    return `${minutes}分钟`
  } else {
    const hours = Math.floor(minutes / 60)
    const remainingMinutes = minutes % 60
    return `${hours}小时${remainingMinutes}分钟`
  }
})

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  
  if (isFullscreen.value) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
}

// 监听ESC键退出全屏
watch(isFullscreen, (newVal) => {
  if (newVal) {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        toggleFullscreen()
        document.removeEventListener('keydown', handleEsc)
      }
    }
    document.addEventListener('keydown', handleEsc)
  }
})
</script>

<style scoped>
.text-preview {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0 24px;
}

.section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.expand-btn {
  color: #6366f1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  height: auto !important;
  font-size: 14px !important;
}

.expand-btn:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}

.preview-content {
  padding: 16px 24px 24px 24px;
  max-height: 400px;
  overflow-y: auto;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.empty-icon {
  color: #d1d5db;
  margin-bottom: 16px;
}

.empty-text {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  max-width: 300px;
}

.empty-hint {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
}

.text-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-stats {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}

.text-body {
  font-size: 14px;
  line-height: 1.8;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* 全屏样式 */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fullscreen-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.fullscreen-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.fullscreen-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fullscreen-text {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  flex: 1;
}

/* 滚动条样式 */
.preview-content::-webkit-scrollbar,
.fullscreen-body::-webkit-scrollbar {
  width: 6px;
}

.preview-content::-webkit-scrollbar-track,
.fullscreen-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.preview-content::-webkit-scrollbar-thumb,
.fullscreen-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.preview-content::-webkit-scrollbar-thumb:hover,
.fullscreen-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>